<template>
  <div>
    <el-container>
      <el-header>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          style="width: 200px"
          v-model="sou"
        >
        </el-input>
        <el-select v-model="value" placeholder="请选择" style="width: 100px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="getByCondition">查询</el-button>
        <el-button type="primary" plain @click="reset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-plus"
          style="float: right"
          @click="add"
          >新增</el-button
        >
      </el-header>
      <el-main
        ><el-table :data="tableData" style="width: 100%">
          <el-table-column prop="serial" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="guarantyNo" label="担保物编号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="担保物名称"> </el-table-column>
          <el-table-column prop="type" label="担保物类别">
            <template slot-scope="scope">
              <p v-if="scope.row.type === '1'">车辆</p>
              <p v-if="scope.row.type === '2'">房产</p>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="审批状态">
            <template slot-scope="scope">
              <p v-if="scope.row.status === '1'">未审批</p>
              <p v-if="scope.row.status === '2'">已通过</p>
              <p v-if="scope.row.status === '4'">已驳回</p>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="redact(scope.row)"
                type="text"
                icon="el-icon-s-claim"
                title="编辑"
              ></el-button>
              <el-button
                @click="examine(scope.row)"
                type="text"
                icon="el-icon-view"
                title="查看"
              ></el-button>
              <el-button
                @click="del(scope.row)"
                type="text"
                icon="el-icon-delete"
                title="删除"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="this.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.pageTotal"
        >
        </el-pagination>
      </el-main>
    </el-container>
    <el-dialog title="担保物信息" :visible.sync="dialogTableVisible">
      <template>
        <div>
          <el-form v-model="guaranty">
            <el-main>
              <el-row>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">
                    <span> 担保物编号</span>
                  </div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.guarantyNo"></el-input></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">担保物类别</div>
                </el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-select
                      v-model="guaranty.type"
                      placeholder="请选择"
                      style="width: 100px"
                    >
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">担保物名称</div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.name"></el-input></div
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">
                    <span>所有权人</span>
                  </div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.possessor"></el-input></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">
                    权证签发机构
                  </div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.issuer"></el-input></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">房产证编号</div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.houseNo"></el-input></div
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">
                    <span>座落</span>
                  </div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.location"></el-input></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">面积</div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.area"></el-input></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">评估价值</div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.value"></el-input></div
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="4"
                  ><div class="grid-content bg-purple">
                    <span>评估机构</span>
                  </div></el-col
                >
                <el-col :span="4"
                  ><div class="grid-content bg-purple-light">
                    <el-input v-model="guaranty.appraisalFirm"></el-input></div
                ></el-col>
              </el-row>
              <el-row>
                <el-col>申请附件</el-col>
              </el-row>
              <el-upload
                class="upload-demo"
                action="''"
                multiple
                :data="guaranty"
                :on-change="fileChang"
                :auto-upload="false"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :http-request="upload"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
              <img width="50%" :src="guaranty.accessory" alt="" />
            </el-main>
            <el-footer>
              <div style="float: right">
                <el-button plain @click="upload()">提交</el-button>
                <el-button>保存</el-button>
                <el-button @click="dialogTableVisible = false">返回</el-button>
              </div>
            </el-footer>
          </el-form>
        </div>
      </template></el-dialog
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgName: "",
      ruleForm: "",
      tableData: [],
      guaranty: {
        id: "",
        name: "",
        serial: "",
        type: "",
        possessor: "",
        appraisalFirm: "",
        guarantyNo: "",
        location: "",
        value: "",
        issuer: "",
        area: "",
        houseNo: "",
        accessory: "",
        status: "",
        updateTime: "",
      },
      fileList: [],
      currentPage4: 1,
      sou: "",
      options: [
        { value: "0", label: "全部" },
        { value: "1", label: "车辆" },
        {
          value: "2",
          label: "房产",
        },
      ],
      options1: [
        { value: "1", label: "车辆" },
        {
          value: "2",
          label: "房产",
        },
      ],
      status1:"",
      value: "0",
      pageTotal: 1,
      pageSize: 5,
      pageNum: 1,
      dialogTableVisible: false,
    };
  },

  created() {
    this.getAll();
  },
  methods: {
    fileChang(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getAll() {
      this.$axios
        .get(
          "http://localhost:8088/guaranty/getAll/" +
            this.pageNum +
            "/" +
            this.pageSize
        )
        .then((resp) => {
          this.tableData = resp.data.data.list;
          this.pageTotal = resp.data.data.total;
          console.log(resp);
        });
    },
    add() {
      this.status1="add";
      this.guaranty = {};
      this.dialogTableVisible = true;
    },
    redact(row) {
      this.status1="update";
      console.log(row);
      this.guaranty = row;
      this.dialogTableVisible = true;
    },
    examine(row) {},
    del(row) {
      this.$axios
        .get("http://localhost:8088/guaranty/del/" + row.id)
        .then((res) => {
          this.dialogTableVisible = false;
          console.log(res.data);
        });
      this.getAll();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
    },
    upload() {
      if(this.status1=="add"){
 //获取文件
      //   let file = document.getElementById("file").files[0];
      //将file封装到formdata
      let formData = new FormData();
      this.fileList.forEach((item) => {
        formData.append("file", item.raw);
      });
      let guaranty = JSON.stringify(this.guaranty);
      formData.append("guaranty", guaranty);
      //上传
      this.$axios
        .post("http://localhost:8088/guaranty/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.dialogTableVisible = false;
          this.getAll();
          console.log(res.data);
        });
      }else if(this.status1=="update"){
        this.update();
      }
     
    },
      update() {
      //获取文件
      //   let file = document.getElementById("file").files[0];
      //将file封装到formdata
      let formData = new FormData();
      this.fileList.forEach((item) => {
        formData.append("file", item.raw);
      });
      let guaranty = JSON.stringify(this.guaranty);
      formData.append("guaranty", guaranty);
      //上传
      this.$axios
        .post("http://localhost:8088/guaranty/update", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.dialogTableVisible = false;
          console.log(res.data);
        });
    },
    reset() {
      this.sta = "0";
      this.sou = "";
      this.value = "0";
    },
    getByCondition() {
      console.log(this.sou);
      console.log(this.value);
      this.$axios
        .get("http://localhost:8088/guaranty/getByCondition", {
          params: {
            name: this.sou,
            type: this.value,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          this.tableData = resp.data.data.list;
          this.pageTotal = resp.data.data.total;
          console.log(resp);
        });
    },
  },
};
</script>
<style>
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>